//Table basic shared vars

$column-width: 296px;
$column-folded-width: 30px;
$column-flex: 0;
$column-shrink: 0;
$column-margin: 0 5px 0 0;
$column-padding: .5rem 1rem;

.kanban-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    width: 100%;
    &.zoom-0 {
        .taskboard-column,
        .task-colum-name {
            max-width: $column-width / 2;
        }
        .task-colum-name span {
            padding-right: 1rem;
        }
    }
    .vfold {
        tg-card {
            display: none;
        }
        &.task-colum-name {
            align-items: center;
            display: flex;
            justify-content: center;
            opacity: .8;
            padding: .5rem 0;
            transition: opacity .3s linear;
            .title {
                display: none;
            }
            .option:not(.hunfold),
            span {
                display: none;
            }
            .hunfold {
                margin: 0;
            }
        }
        &.task-colum-name,
        &.taskboard-column {
            flex-flow: 1;
            max-width: $column-folded-width;
            min-height: 2.5rem;
            min-width: $column-folded-width;
            width: $column-folded-width;
        }
        .kanban-column-intro {
            display: none;
        }
    }
    .readonly {
        cursor: auto;
    }

}

.kanban-table-header {
    flex-basis: 2.4rem;
    min-height: 2.4rem;
    position: relative;
    .kanban-table-inner {
        display: flex;
        overflow: visible;
        position: absolute;
        width: 100%;
    }
    .options {
        display: flex;
    }
    .task-colum-name {
        @include font-size(medium);
        align-items: center;
        background-color: $grey-02;
        border-top: 3px solid $gray-light;
        color: $gray;
        display: flex;
        flex-basis: $column-width;
        flex-grow: $column-flex;
        flex-shrink: $column-shrink;
        justify-content: space-between;
        margin: $column-margin;
        max-width: $column-width;
        padding: $column-padding;
        position: relative;
        text-transform: uppercase;
        &:last-child {
            margin-right: 0;
        }
        .title {
            align-items: flex-end;
            display: flex;
            width: 100%;
            .counter {
                @include font-size(xsmall);
                line-height: 1.6;
                margin: 0 .5rem;
            }
            .name {
                @include ellipsis(65%);
            }
        }
        .option {
            margin-right: .3rem;
        }
        .icon {
            fill: $grey-30;
            height: 1rem;
            stroke: $grey-30;
            transition: color .2s linear;
            width: 1rem;
            &:hover {
                fill: $primary;
            }
        }
    }
}

.kanban-table-body {
    @include font-size(medium);
    display: flex;
    height: 100%;
    margin-top: 1px;
    overflow: hidden;
    overflow-x: auto;
    width: 100%;
    .taskboard-column {
        flex-basis: $column-width;
        flex-grow: $column-flex;
        flex-shrink: $column-shrink;
        margin: $column-margin;
        max-width: $column-width;
        overflow-y: auto;
        widows: $column-width;
        width: $column-width;
        &:last-child {
            margin-right: 0;
        }
        .kanban-column-intro {
            @include font-type(semibold);
            @include font-size(small);
            color: $gray-light;
            margin: 1rem 2rem;
            &.active {
                color: $blackish;
            }
        }
        .kanban-wip-limit {
            background: $red;
            border-radius: 2px;
            height: 4px;
            margin: .5rem 0;
            padding: 0;
        }
    }
    .kanban-uses-box {
        background-color: $grey-02;
    }
    .kanban-task-selected {
        &.card:not(.gu-transit-multi) {
            // border: 1px solid $primary-light;
            box-shadow: 0 0 0 1px $primary-light, 2px 2px 4px darken($whitish, 10%);
        }
    }
}

.kanban-table-inner {
    display: flex;
    flex-wrap: nowrap;
}

.card-transit-multi {
    background: darken($whitish, 2%);
    border: 1px dashed darken($whitish, 8%);
    display: none;
    opacity: 1;
    padding: 1rem;
    .fake-img,
    .fake-text {
        background: darken($whitish, 8%);
    }
    .fake-us {
        display: flex;
        margin-bottom: 1rem;

        &:last-child {
            margin-bottom: 0;
        }
    }
    .column {
        padding-left: .5rem;
        width: 100%;
    }
    .fake-img {
        flex-basis: 48px;
        flex-shrink: 0;
        height: 48px;
        width: 48px;
    }
    .fake-text {
        height: 1rem;
        margin-bottom: 1rem;
        width: 80%;
        &:last-child {
            margin-bottom: 0;
            width: 40%;
        }
    }
}

.card.gu-transit-multi {
    .card-transit-multi {
        display: block;
    }
    .card-inner {
        display: none;
    }
}
